<!--
	Author: W3layouts
	Author URL: http://w3layouts.com
	License: Creative Commons Attribution 3.0 Unported
	License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html lang="en">
<!-- Head -->
<head>
<title>Hotel Booking Enquiry Form Widget A Flat Responsive Widget Template :: W3layouts</title>
<!-- Meta-Tags -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="Hotel Booking Enquiry Form Widget Responsive, Login Form Web Template, Flat Pricing Tables, Flat Drop-Downs, Sign-Up Web Templates, Flat Web Templates, Login Sign-up Responsive Web Template, Smartphone Compatible Web Template, Free Web Designs for Nokia, Samsung, LG, Sony Ericsson, Motorola Web Design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //Meta-Tags -->
<!-- Custom-Style-Sheet -->
{css href="/static/admin/assets/css/toastr.min.css"}
<link rel="stylesheet" href="/static/layui/css/layui.css" type="text/css" media="all">
<link rel="stylesheet" href="/static/index/css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="/static/index/css/jquery-ui.css" type="text/css" media="all">
<!-- //Custom-Style-Sheet -->
<!-- Fonts -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800"  type="text/css" media="all">
<link href='//fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<!-- //Fonts -->
<!-- Default-JavaScript -->
<script type="text/javascript" src="/static/index/js/jquery-2.1.4.min.js"></script>
</head>
<!-- //Head -->
<!-- Body -->
<body>
	<h1>酒店预定</h1>
		<div class="containerw3layouts-agileits">
			<div class="w3layoutscontactagileits">
				<h2>填写你的个人信息</h2>
					<div id="wrapper">
							<form id="myinput" class="inner" method="post">
								<div id="login" class="animate w3layouts agileits form">
								<div class="ferry ferry-from">
										<label>你的名字</label>
										<input type="text" name="name" placeholder="Name" required=" ">
									</div>
									<div class="ferry ferry-from">
										<label>你的联系电话</label>
										<input type="text" name="tel" placeholder="Tel" required=" ">
									</div>
                                    <div class="book-pag agileits w3layouts">
                                        <div class="book-pag-frm1 agileits w3layouts">
                                            <label>入住日期</label><input class="date agileits w3layouts" id="datepicker2" type="text" value="Date" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}" required="" name="checkin">
                                        </div>
                                        <div class="clear"></div>
                                    </div>
                                    <div class="book-pag agileits w3layouts">
                                        <div class="book-pag-frm1 agileits w3layouts">
                                            <label>离开日期</label><input class="date agileits w3layouts" id="datepicker1" type="text" value="Date" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}" required="" name="checkout">
                                        </div>
                                        <div class="clear"></div>
                                    </div>
                                    <br>
									<div class="ferry ferry-from">
										<label>你下单的房型</label>
                                        <label>{$data.type}</label>
                                        <div class="clear"></div>
									</div>
                                    <br>
                                    <hr>
									<div class="wthreesubmitaits">
                                        <input type="submit" name="submit" class="order-btn" value="立即下单">
										<button style="float: right;"><a href="{:url('index/index/index')}">返回首页</a></button>
									</div>
								</div>
								</form>
						</div>
			</div>
		</div>
		<div class="w3lsfooteragileits">
			<p> &copy; 2017 Hotel Booking Enquiry Form. All Rights Reserved | Design by <a href="http://w3layouts.com" target="=_blank">W3layouts</a></p>
		</div>
<script src="/static/admin/assets/js/jquery.min.js"></script>
<script src="/static/admin/assets/js/toastr.min.js"></script>
<script src="/static/layer/layer.js"></script>
<script>
    $(function () {
        // 设置弹框参数
        toastr.options = {
            closeButton: true,// 是否显示关闭按钮
            progressBar: true,// 实现显示计时条
            timeOut: "3000",  // 自动关闭时间
            positionClass: "toast-bottom-left" // 提示位置
            // toast-top-full-width 顶端，宽度铺满整个屏幕
            // toast-top-right  顶端右边
        };

        // 触发添加订单
        $('.order-btn').click(function () {
            var data = $('#myinput input').serialize();
            // console.log(data);
            // layer.confirm('确定支付?', {
            //     btn: ['确定','取消'] //按钮
            // }, function(){
                addOrder(data);
            //     layer.msg('下单成功', {icon: 1});
            // });

        });
    });


    // 执行AJAX添加
    function addOrder(data) {
        // console.log(data);
        $.ajax({
            type: 'post',
            url: '/index/order/',
            data: data,
            success: function (data) {
                // alert('下单成功');
                // console.log(data);
                if (data.status) {
                    toastr.success(data.info);
                    layer.msg('下单成功');
                } else {
                    toastr.error(data.info, 'FBI WARING:');
                }
            },
            error: function () {
                alert('ajax失败');
            }
        });
        
    }
</script>
        <!-- Necessary-JavaScript-Files-&-Links -->
            <!-- Date-Picker-JavaScript -->
                <script src="/static/index/js/jquery-ui.js"></script>
                <script>
                    $(function() {
                        $( "#datepicker,#datepicker1,#datepicker2" ).datepicker();
                    });
                </script>
            <!-- //Date-Picker-JavaScript -->
        <!-- //Necessary-JavaScript-Files-&-Links -->

</body>
<!-- //Body -->
</html>